import _ from "lodash";
import { reactive } from "vue";
import { defineStore } from "pinia";
import { STORE_TAB_VIEW_CONFIG } from "../store/constant/cacheKey";
import { NavTabs } from "../store/types/type";
import type { RouteLocationNormalized, RouteRecordRaw } from "vue-router";
import { Names } from "../store/store-namespace";

export const useNavTabs = defineStore(Names.navTabs, () => {
  const state: NavTabs = reactive({
    // 激活tab的index
    activeIndex: 0,
    // 激活的tab
    activeRoute: null,
    // tab列表 顶部的面包屑导航路由数据
    tabsView: [],
    // 当前tab是否全屏
    tabFullScreen: false,
    // 管理系统从后台加载到的菜单路由列表
    tabsViewRoutes: [],
    // 按钮权限节点
    authNode: new Map(),
    aside: false,
    authNodes: [],
    columnDisplayStoreMap: new Map(), //字段显隐
    pageSizeMap: new Map(),
  });

  //为顶部导航添加tab router.currentRoute.value类型数据 登录之后跳转到后台路由数据第一个选项
  function addTab(route: RouteLocationNormalized) {
    //只有动态路由addtab为true
    if (!route.meta.addtab) return;
    for (const key in state.tabsView) {
      //route.path为/admin
      if (state.tabsView[key].path === route.path) {
        state.tabsView[key].params = !_.isEmpty(route.params)
          ? route.params
          : state.tabsView[key].params;
        state.tabsView[key].query = !_.isEmpty(route.query)
          ? route.query
          : state.tabsView[key].query;
        return;
      }
    }
    if (typeof route.meta.title == "string") {
      route.meta.title = route.meta.title;
    }
    state.tabsView.push(route);
  }

  //关闭当前tab
  function closeTab(route: RouteLocationNormalized) {
    state.tabsView.map((v, k) => {
      if (v.path == route.path) {
        //删除当前选项
        state.tabsView.splice(k, 1);
        return;
      }
    });
  }
  /**
   * 关闭多个标签
   * @param retainMenu 需要保留的标签，否则关闭全部标签
   */
  const closeTabs = (retainMenu: RouteLocationNormalized | false = false) => {
    if (retainMenu) {
      state.tabsView = [retainMenu];
    } else {
      state.tabsView = [];
    }
  };
  //确定当前激活的tab
  const setActiveRoute = (route: RouteLocationNormalized): void => {
    // console.log("当前激活的tab", route);

    const currentRouteIndex: number = state.tabsView.findIndex(
      (item: RouteLocationNormalized) => {
        return item.path === route.path;
      }
    );
    if (currentRouteIndex === -1) return;
    state.activeRoute = route;
    state.activeIndex = currentRouteIndex;
  };

  //处理按钮权限节点
  const setAuthNode = (key: string, data: string[]) => {
    state.authNode.set(key, data);
    state.authNodes = data;
  };

  // 更新stores中的路由菜单数据
  const setTabsViewRoutes = (data: RouteRecordRaw[]): void => {
    state.tabsViewRoutes = encodeRoutesURI(data);
  };

  //设置tab不为全屏
  const setFullScreen = (fullScreen: boolean): void => {
    state.tabFullScreen = fullScreen;
  };
  //是否隐藏aside
  const setAside = (aside: boolean): void => {
    state.aside = aside;
  };

  return {
    state,
    setAuthNode,
    setTabsViewRoutes,
    setFullScreen,
    setActiveRoute,
    addTab,
    closeTab,
    closeTabs,
    setAside,
  };
});

/**
 * 对iframe的url进行编码? 不是iframe类型的话处理好就返回
 */
function encodeRoutesURI(data: RouteRecordRaw[]) {
  data.forEach((item) => {
    if (item.meta?.type == "iframe") {
      item.path = "/admin/iframe/" + encodeURIComponent(item.path);
    }

    if (item.children && item.children.length) {
      item.children = encodeRoutesURI(item.children);
    }
  });
  return data;
}
